<!-- 直播详情优化 -->
<template>
  <div class="liveDetails" id="liveDetails">
    <!-- 左侧信息栏 -->
    <div class="boxleft">
      <div class="bltop fillet" v-if="Introduction">
        <div class="title">
          <img
            :src="Introduction.roomLogo"
            class="titlelogo hands"
            @click="go_to_page02(proList[0].roomId)"
          />
          <div class="zhibo">
            <p class="livingGif">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </p>
          </div>
          <p @click="go_to_page02(proList[0].roomId)" class="hands">
            <span v-if="Introduction.isShop == 1"
              ><img src="@/assets/zhao/live/shop.png"/></span
            >{{ Introduction.roomTitle }}
          </p>
        </div>
        <p class="bltime">
          开播时间
          <span>{{ timestamp(Introduction.beginUnix, "Y-M-D h:m:s") }}</span>
        </p>
        <p class="bltime">
          结束时间
          <span>{{ timestamp(Introduction.endUnix, "Y-M-D h:m:s") }}</span>
        </p>
        <p class="bltime">
          直播时长
          <span>{{
            format_time((Introduction.endUnix - Introduction.beginUnix) * 1000)
          }}</span>
        </p>
        <div class="blbtn" v-if="proList">
          <!-- <span>添加对比</span> --><span
            @click="go_to_page02(proList[0].roomId)"
            >直播大屏</span
          >
        </div>
      </div>
      <div class="blbot fillet" v-if="DetailInfo != null">
        <div class="portrait">
          <img :src="DetailInfo.logo" />
          <p>
            {{ DetailInfo.nickName
            }}<span>抖音号：{{ DetailInfo.uniqueId }}</span>
          </p>
        </div>
        <div class="infor sex">
          性别
          <img class="sex" v-if="1 > 2" src="@/assets/shi/girl.png" alt="" />
          <!-- infoData.gender == 1 -->
          <img
            class="sex"
            v-else-if="2 > 2"
            src="@/assets/shi/boy.png"
            alt=""
          />
          <span v-else>--</span>
        </div>
        <div class="infor sex">
          年龄<span>{{ DetailInfo.age }}岁</span>
        </div>
        <div class="infor mouth">
          <p>带货口碑</p>
          <div class="info_item-right">
            <el-rate
              v-model="scareValue"
              disabled
              :colors="['#4f5058', '#fd7f2c', '#ea4759']"
              score-template="{value}"
            >
            </el-rate>
            <span
              :style="{
                color:
                  scareValue >= 4
                    ? '#ea4759'
                    : scareValue >= 2 && scareValue < 4
                    ? '#fd7f2c'
                    : '#4f5058'
              }"
              >{{ scareValue }}</span
            >

            <span v-if="scareValue >= 4" style="color: #ea4759">高</span>
            <span
              v-else-if="scareValue >= 2 && scareValue < 4"
              style="color: #fd7f2c"
              >中</span
            >
            <span v-else style="color: #4f5058">低</span>
            <img
              class="num-img"
              src="@/assets/shi/k-line.png"
              @click="showMouthEchart = true"
            />
          </div>
        </div>
        <div class="infor in-num">
          粉丝总数<span>{{ format_num(dataOverView.totalFans) }}</span>
          <img
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="showFansEchart = true"
          />
        </div>
        <div class="infor in-num">
          点赞总数<span>{{ format_num(dataOverView.totalFavorite) }}</span>
          <img
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="showFabulousEchart = true"
          />
        </div>
      </div>
    </div>
    <!-- 右侧数据栏 -->
    <div class="boxright">
      <div class="tabbtn">
        <a
          href="#bgdata"
          @click="changeBg(1)"
          :class="{ showClass: showClass == 1 }"
          >直播数据分析</a
        ><a
          href="#bggoods"
          @click="changeBg(2)"
          :class="{ showClass: showClass == 2 }"
          >直播商品分析</a
        ><a
          href="#viewerbox"
          @click="changeBg(3)"
          :class="{ showClass: showClass == 3 }"
          >直播观众分析</a
        >
      </div>
      <div class="main fillet">
        <!-- 直播数据分析 -->
        <div class="bgdata" id="bgdata">
          <!-- 人气数值 -->
          <div class="mood" v-if="InfoData != null">
            <p class="slide"><span></span>人气数据</p>
            <div class="moodbox">
              <p>
                {{ format_num(InfoData.lookPeople) }}<span>累计观看人次</span>
              </p>
              <p>
                {{ format_num(InfoData.lookPeak) }}<span>观看人数峰值</span>
              </p>
              <div class="border bor1"></div>
              <p>
                {{ format_num(InfoData.avgonLinePeople)
                }}<span>平均在线人数</span>
              </p>
              <p>
                {{ format_num(InfoData.avgLookTime) }}<span>人均看播时长</span>
              </p>
              <div class="border bor2"></div>
              <p>{{ format_num(InfoData.favorite) }}<span>点赞数</span></p>
              <div class="border bor3"></div>
              <p>{{ InfoData.liveFanRate }}%<span>转粉率</span></p>
              <div class="border bor4"></div>
              <p class="mbfan">
                {{ format_num(InfoData.liveFanCount) }}<span>新增粉丝</span>
              </p>
              <p class="mbfans">
                {{ format_num(InfoData.fansClubPeopleNum)
                }}<span>粉丝团新增人数</span>
              </p>
            </div>
          </div>
          <!-- 带货数据 -->
          <div class="mood" v-if="InfoData != null">
            <p class="slide"><span></span>带货数据</p>
            <div class="moodbox">
              <p>{{ format_num(InfoData.liveSale) }}<span>本场销售额</span></p>
              <p>{{ format_num(InfoData.liveVolume) }}<span>本场销量</span></p>
              <div class="border bor1"></div>
              <p>{{ format_num(InfoData.livePro) }}<span>直播商品数</span></p>
              <p>{{ format_num(InfoData.clickCount) }}<span>点击量</span></p>

              <div class="border bor2"></div>
              <p>{{ format_num(InfoData.avgLook) }}<span>u价值</span></p>
              <div class="border bor3"></div>
              <p>{{ InfoData.clickCount }}%<span>转化率</span></p>
              <div class="border bor4"></div>

              <p class="mbfan">
                {{ format_num(InfoData.avgPrice) }}<span>客单价</span>
              </p>
              <p class="mbfans">
                {{ format_num(InfoData.priceRange)
                }}<span>直播商品价格区间</span>
              </p>
            </div>
          </div>
          <!-- 数据趋势 -->
          <div class="trend">
            <p class="slide"><span></span>数据趋势</p>

            <div>
              <div class="check">
                <span>互动指标</span>
                <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                  <el-checkbox
                    v-for="(value, key) in cities"
                    :label="value"
                    :key="key"
                    >{{ value }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <div class="check">
                <span>观看指标</span>
                <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                  <el-checkbox
                    v-for="city in cities1"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <div class="check">
                <span>订单指标</span>
                <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                  <el-checkbox
                    v-for="city in cities2"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>

            <div class="zanwu">
              <!-- v-if="active_name == '5' -->
              <div style="height: 480px; width: 100%">
                <liveLineChart
                  :xData="xData01"
                  :series1="y1Data01"
                  :series2="y2Data01"
                  :name1="name"
                  :name2="name1"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 直播商品分析 -->
        <div class="bggoods" id="bggoods">
          <p class="slide"><span></span>商品列表</p>
          <!-- 商品类目 -->
          <div>
            <radioGroupWithNum
              :radio_values="proKindList"
              v-model="proKind"
              title="商品类目"
              class="mt_10"
            />
          </div>
          <!-- <dl>
            <dt>商品类目</dt>
            <dd
              ref="ovBox"
              :class="[{ overstep: isOverstep }, { is_unfold: isUnfold }]"
            >
              <div class="cg_items" ref="ovChild">
                <span
                  v-for="(item, idx) in proKindList"
                  :key="idx + 'cdi'"
                  :class="{ active: item.name == proKind }"
                  @click="getCondition(item)"
                  >{{ item.name }}</span
                >
                <i @click="unfoldFn">{{ isUnfold ? "收起" : "展开" }}</i>
              </div>
            </dd>
          </dl> -->
          <!-- 合作小店 -->
          <!-- <div>
            <radioGroupWithNum :radio_values="shopKindList"
                               v-model="shopKind"
                               title="合作小店"
                               class="mt_10" />
          </div> -->
          <dl>
            <dt>合作小店</dt>
            <dd
              ref="ovBox"
              :class="[{ overstep: isOverstep }, { is_unfold: isUnfold2 }]"
            >
              <div class="cg_items" ref="ovChild">
                <span
                  v-for="(item, idx) in shopKindList"
                  :key="idx + 'cdi'"
                  :class="{ active: item.name == shopKind }"
                  @click="getCondition2(item)"
                  >{{ item.name }}</span
                >
                <i @click="unfoldFn2">{{ isUnfold2 ? "收起" : "展开" }}</i>
              </div>
            </dd>
          </dl>
          <!-- 商品品牌 -->
          <div>
            <radioGroupWithNum
              :radio_values="brandList"
              v-model="brand"
              title="商品品牌"
              class="mt_10"
            />
          </div>
          <!-- 搜索框 -->
          <div class="searchBox">
            <el-input
              v-model="keyword"
              placeholder="请输入商品关键词搜索"
              @keyup.enter.native="toSearch"
            ></el-input>
            <div class="imgBox" @click="toSearch">
              <img src="@/assets/wang/talentCompare/search.png" />
            </div>
          </div>
          <!-- 统计表 -->
          <div class="census">
            <div class="fillet">
              <p>商品(件)</p>
              <span>{{ format_num(count) }}</span>
            </div>
            <div class="fillet">
              <p>累计销量</p>
              <span>{{ format_num(volume) }}</span>
            </div>
            <div class="fillet">
              <p>累计销售额</p>
              <span>{{ format_num(amount) }}</span>
            </div>
          </div>
          <!-- 商品表格 -->
          <div class="last_list">
            <section ref="capture">
              <table class="table" ref="tableEl">
                <thead>
                  <tr ref="th_tr_El">
                    <th>商品</th>
                    <th>上下架时间</th>
                    <th>价格</th>
                    <th>销量</th>
                    <th>销售额</th>
                    <!-- <th>讲解次数</th>
                    <th>累计讲解时长</th> -->
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in proList" :key="'a' + index">
                    <td style="width: 366px">
                      <div class="rightBox">
                        <div class="picture">
                          <img :src="item.proLogo" />
                        </div>
                        <div class="info">
                          <div class="info_top">
                            <img src="@/assets/li/2.png" />{{ item.proTitle }}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td style="width: ">
                      {{ timestamp(item.addedUnix, "M-D h:m")
                      }}<span style="display: block">{{
                        timestamp(item.addedUnix, "M-D h:m")
                      }}</span>
                    </td>
                    <td>￥{{ item.livePrice }}</td>
                    <td>{{ format_num(item.volume) }}</td>
                    <td>{{ format_num(item.amount) }}</td>
                    <!-- <td>{{ format_num(30) }}</td>
                    <td>10分10秒</td> -->
                    <td>
                      <span
                        class="fillet hands"
                        @click="
                          GetLiveRoomsByProId(item);
                          showHotRoom = true;
                        "
                        >直播数据</span
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- 分页 -->
              <div v-if="count < 0" class="Popupline">我是有底线的~</div>
              <div class="pageBox" v-if="proList.length != 0">
                <el-pagination
                  background
                  layout="prev, pager, next, jumper"
                  :total="count"
                  :page-size="8"
                  :current-page="page01"
                  @current-change="changePage"
                  :hide-on-single-page="true"
                ></el-pagination>
              </div>
              <div class="empty addTop" v-show="proList.length == 0">
                <img src="@/assets/liu/zw.png" />
                <p>暂无数据</p>
              </div>
            </section>
          </div>
        </div>
        <!-- 直播观众分析 -->
        <div class="viewerbox" id="viewerbox">
          <div class="vbleft">
            <p class="slide"><span></span>观众画像</p>
            <div class="second_hua">
              <GenderSpread :pieData="pieGenderData" />
            </div>
            <div class="second_echart">
              <BarChart v-if="fansxData.length != 0" :pieData="fansxData" />
            </div>
          </div>
          <div class="vbright">
            <p class="slide"><span></span>观众来源分析</p>
            <BigPie :valueData="fansDiYu" v-if="fansDiYu.length != 0" />
          </div>
        </div>
      </div>
    </div>

    <!-- 口碑趋势 -->
    <el-dialog
      :visible.sync="showMouthEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">口碑趋势</div>
          <div class="switch">
            <div
              class="switch-btn"
              :class="{ native: changeBoard }"
              @click="changeList(true)"
            >
              周榜
            </div>
            <div
              class="switch-btn"
              :class="{ native: !changeBoard }"
              @click="changeList(false)"
            >
              月榜
            </div>
          </div>
        </div>
        <div class="popup_wrap-explain">
          <el-rate
            v-model="scareValue"
            disabled
            :colors="['#4f5058', '#fd7f2c', '#ea4759']"
            score-template="{value}"
          >
          </el-rate>
          <span
            :style="{
              color:
                scareValue >= 4
                  ? '#ea4759'
                  : scareValue >= 2 && scareValue < 4
                  ? '#fd7f2c'
                  : '#4f5058'
            }"
            >{{ scareValue }}</span
          >

          <span v-if="scareValue >= 4" style="color: #ea4759">高</span>
          <span
            v-else-if="scareValue >= 2 && scareValue < 4"
            style="color: #fd7f2c"
            >中</span
          >
          <span v-else style="color: #4f5058">低</span>
          <div class="text">
            带货口碑排名打败<span class="num"
              >{{ PraiseData.percentage ? PraiseData.percentage : "--" }}%</span
            >同行
          </div>
        </div>
        <div class="popup_wrap-echart">
          <KChart
            :xData="PraiseData.name"
            :series1="PraiseData.value"
            name1="口碑趋势"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 粉丝趋势 -->
    <el-dialog
      :visible.sync="showFansEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">粉丝趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01
              :radio_values="['近7天', '30天', '90天']"
              v-model="FansDays"
              class="tab01"
            />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FansliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FansStartEnd"
                value-format="yyyy-MM-dd"
                @change="FansPicker"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            :xData="FansEchart.xData"
            :series1="FansEchart.yData1"
            :series2="FansEchart.yData2"
            name1="增量"
            name2="总量"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 点赞趋势 -->
    <el-dialog
      :visible.sync="showFabulousEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">点赞趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01
              :radio_values="['近7天', '30天', '90天']"
              v-model="FabulousDays"
              class="tab01"
            />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FabulousliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FabulousStartEnd"
                value-format="yyyy-MM-dd"
                @change="FabulousPicker"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            :xData="FabulousEchart.xData"
            :series1="FabulousEchart.yData1"
            :series2="FabulousEchart.yData2"
            name1="增量"
            name2="总量"
          />
        </div>
      </div>
    </el-dialog>
    <!-- 直播间弹窗 -->
    <el-dialog
      :visible.sync="showHotRoom"
      top="10%"
      class="dialog01"
      custom-class="buyDialog"
      width="1100px"
    >
      <div class="hotRoomBox" v-if="liveBoxData">
        <!-- 商品直播数据 -->
        <div class="hbnumbox">
          <p class="slide"><span></span>商品直播数据</p>
          <div class="hbnum">
            <img :src="liveBoxData.proLogo" alt="" />
            <p>
              {{ liveBoxData.proTitle
              }}<span>店铺：{{ liveBoxData.shopTitle }}</span>
            </p>
          </div>
          <div class="datas" v-if="liveBoxData">
            <p style="padding-left: 50px">
              {{ liveBoxData.livePrice }}<span>最低价(元)</span>
            </p>
            <p>{{ liveBoxData.maxPrice }}<span>最高价(元)</span></p>
            <div class="border bor1"></div>
            <p>{{ format_num(liveBoxData.volume) }}<span>销量</span></p>
            <p>{{ format_num(liveBoxData.amount) }}<span>销售额</span></p>
            <!-- <p><span>讲解次数</span></p>
              <p style="padding-right: 0;"><span>讲解时长</span></p> -->
          </div>
        </div>
      </div>
      <!-- 直播销量趋势图 -->
      <div class="trends">
        <p class="slide" style="margin-bottom: 30px">
          <span></span>直播销量趋势图
        </p>
        <div style="height: 320px">
          <div class="switch">
            <div
              class="switch-btn"
              :class="{ native: showJgXl }"
              @click="changeValue(true)"
            >
              销量
            </div>
            <div
              class="switch-btn"
              :class="{ native: !showJgXl }"
              @click="changeValue(false)"
            >
              价格
            </div>
          </div>
          <livetabchart
            v-if="vtrend.length != 0"
            :xData="tspans"
            :series1="vtrend"
            :series2="ptrend"
            :name1="showJgXl ? '销量' : '价格'"
          />
          <div class="empty addTop" v-if="vtrend.length == 0">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <!-- 讲解列表 -->
      <!-- <p class="slide"><span></span>讲解列表</p>
        <div v-loading="roomLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
        <table class="table">
          <thead>
            <tr>
              <th style="padding-left:30px">讲解时间</th>
              <th>讲解时长</th>
              <th>价格</th>
              <th>销量</th>
            </tr>
          </thead>
          <tbody>
            <tr style="text-align: center;font-size:15px;color:#222;">
              <td style="padding-left:0;">07-01 18:30</td>
              <td>10分10秒</td>
              <td>{{liveBoxData.livePrice}}</td>
              <td>{{format_num(liveBoxData.volume)}}</td>
            </tr>
          </tbody>
        </table> -->
      <!-- <div v-if="count <= 5"
             class="Popupline">我是有底线的~</div>-->
      <!-- <div class="pageBoxs"
             v-if="count > 5">
          <el-pagination background
                         layout="prev, pager, next, jumper"
                         :total="count"
                         :page-size="5"
                         :current-page="page01"
                         @current-change="changePages"
                         :hide-on-single-page="true"></el-pagination>
        </div> -->
      <!-- </div> -->
      <!-- </div> -->
    </el-dialog>
  </div>
</template>

<script>
import GenderSpread from "../../workbench/GenderSpread.vue";
import BarChart from "../../talent/tdetails/NewComponents/BarChart.vue";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
import KChart from "@/pages/wang/talent/tdetails/NewComponents/KChart.vue";
import radioGroupWithNum from "@/component/radioGroupWithNum.vue";
import liveLineChart from "../component/liveLineChart.vue";
import livetabchart from "../component/livetabchart.vue";
export default {
  data() {
    const cityOptions = { 1: "点赞次数", 5: "涨粉人数", 3: "粉丝团人数" };
    const cityOptions1 = ["实时在线人数", "实时进场人数"];
    const cityOptions2 = ["直播期间成交订单数", "直播期间成交金额"];
    return {
      proId: null,
      checkedCities: ["点赞次数"],
      cities: cityOptions,
      cities1: cityOptions1,
      cities2: cityOptions2,
      scareValue: 4, //口碑评分
      showMouthEchart: false, //口碑趋势
      showFansEchart: false, //粉丝总数
      showFabulousEchart: false, //点赞总数
      changeBoard: true,
      Introduction: null, //直播详情简介
      DetailInfo: null, // 直播达人信息
      InfoData: null, //人气数值
      keyword: "",
      dataOverView: {},
      pieGenderData: [],
      fansxData: [],
      fansDiYu: [],
      fansDiYu: [],
      proList: [], //商品列表
      showHotRoom: false, //直播数据弹窗
      FansDays: "近7天", //粉丝趋势
      FabulousDays: "近7天", //点赞趋势
      FansliveTime: "", //粉丝弹窗选择时间
      FabulousliveTime: "", //点赞弹窗选择时间
      FansStartEnd: "",
      FabulousStartEnd: "",
      //左侧echarts弹窗数据
      FansEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },

      FabulousEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },
      PraiseData: {},
      count: 0, //分页页数
      volume: 0, //累计销量
      amount: 0, //累计销售额
      page01: 1,
      page: 1,
      acts: [1, -1, -1], //tab 按钮
      res01: null,
      proKindList: [], //商品类目
      proKind: "全部",
      shopKindList: [], //小店分类
      shopKind: "全部",
      brandList: [], //商品品牌
      brand: "全部",
      liveBoxData: null, //直播间弹框单项数据
      name: "点赞次数",
      name1: "",
      xData01: [],
      y1Data01: [],
      y2Data01: [],
      type: [],
      /* 弹窗中的折线图 */
      vtrend: [],
      ptrend: [],
      tspans: [],
      showJgXl: true,
      shopValue: 0,
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      isUnfold2: false,
      showClass: 1
    };
  },
  components: {
    GenderSpread,
    BarChart,
    BigPie,
    KChart,
    radioGroupWithNum,
    liveLineChart,
    livetabchart
  },
  computed: {
    changeData() {
      const { proKind, shopKind, KindName, brand } = this;
      return {
        proKind,
        shopKind,
        KindName,
        brand
      };
    }
  },
  watch: {
    // 粉丝总数
    FansDays: function(newVal, oldVal) {
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    // 点赞总数
    FabulousDays: function(newVal, oldVal) {
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFabulousEchart();
    },
    changeData() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    // 搜索
    keyword: function(newVal, oldVal) {
      if (newVal == "") {
        this.proList = [];
        this.page = 1;
        this.getProList();
      }
    },
    /* 监听多选按钮 */
    checkedCities(n) {
      this.xData01 = [];
      this.y1Data01 = [];
      this.y2Data01 = []; // this.this.data_x = [];
      this.name = null;
      this.name1 = null;
      this.name = n[0];
      this.name1 = n[1];
      this.type = [];
      console.log(n);
      n.map(item => {
        if (item == "点赞次数") {
          this.type.push("1");
        } else if (item == "点赞次数") {
          this.type.push("1");
        } else if (item == "涨粉人数") {
          this.type.push("3");
        } else if (item == "粉丝团人数") {
          this.type.push("2");
        } else if (item == "实时在线人数") {
          this.type.push("8");
        } else if (item == "实时进场人数") {
          this.type.push("0");
        } else if (item == "直播期间成交订单数") {
          this.type.push("6");
        } else if (item == "直播期间成交金额") {
          this.type.push("7");
        }
        // console.log(this.type);
      });
      this.trend();
    }
  },
  created() {},
  mounted() {
    this.GetLiveIntroduction();
    this.GetAuthorDetailInfo();
    this.GetLiveInfoData();
    this.getFansPortrait();
    this.getProList();
    this.showChangeList(); //口碑评分
    this.getFansEchart(); //粉丝点赞
    this.getCateList(); //合作小店+商品类目
    this.GetBrandByRoomId(); //品牌
    this.trend(); //折线图
  },
  methods: {
    changeBg(e) {
      this.showClass = e;
    },
    getCondition(itemObj) {
      //商品类目
      this.proKind = itemObj.name;
      this.kindValue = itemObj.value;
    },
    getCondition2(itemObj) {
      console.log("itemObj");
      //点击达人行业选项
      this.shopKind = itemObj.name;
      this.shopValue = itemObj.value;
    },
    getCondition3(itemObj) {
      //点击达人行业选项
      this.shop = itemObj.name;
      this.shopValue = itemObj.value;
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    unfoldFn2() {
      this.isUnfold2 = !this.isUnfold2;
    },
    unfoldFn3() {
      this.isUnfold3 = !this.isUnfold3;
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
        }
      });
    },
    // 搜索
    toSearch() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    FansPicker() {
      //粉丝总数
      this.FansDays = "";
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    FabulousPicker() {
      //点赞总数
      this.FabulousDays = "";
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFansEchart();
    },
    // 口碑评分
    showChangeList() {
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            // authorId: this.authorId,
            authorId: 96987607056,
            trendType: 1
          }
        })
        .then(res => {
          this.scareValue = res.data.data.publicPraise;
          this.PraiseData = res.data.data;
        });
    },
    changeList(e) {
      if (this.changeBoard == e) return; //防止一直点击同一个按钮一直请求数据
      this.changeBoard = e;
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            // authorId: this.authorId,
            authorId: 96987607056,
            trendType: e ? 1 : 2
          }
        })
        .then(res => {
          this.scareValue = res.data.data.publicPraise;
          // this.percentage = res.data.data.percentage
          this.PraiseData = res.data.data;
        });
    },
    changeValue(e) {
      this.tspans = [];
      this.vtrend = [];
      this.ptrend = [];
      if (this.showJgXl == e) return; //防止一直点击同一
      this.showJgXl = e;
      this.GetLiveVolPriByPro();
    },
    // 获取左侧粉丝图表数据
    getFansEchart() {
      switch (this.FansDays) {
        case "近7天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate1 = this.FansliveTime[0];
          this.endDate1 = this.FansliveTime[1];
          break;
      }
      this.FansliveTime = [this.startDate1, this.endDate1];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            // AuthorId: this.authorId,
            AuthorId: 96987607056,
            trendType: 1,
            star_time: this.startDate1,
            end_time: this.endDate1
          }
        })
        .then(res => {
          let that = this;
          if (res.data.code == 0) {
            this.FansEchart.yData1 = res.data.data.datas1;
            this.FansEchart.yData2 = res.data.data.datas2;
            res.data.data.dates.forEach((item, index) => {
              that.FansEchart.xData.push(that.timestamp(item, "Y-M-D"));
              return that.FansEchart.xData;
            });
          }
        });
    },
    // 获取左侧点赞趋势图表数据
    getFabulousEchart() {
      switch (this.FabulousDays) {
        case "近7天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate2 = this.FabulousliveTime[0];
          this.endDate2 = this.FabulousliveTime[1];
          break;
      }
      this.FabulousliveTime = [this.startDate2, this.endDate2];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            // AuthorId: this.authorId,
            AuthorId: 96987607056,
            trendType: 2,
            star_time: this.startDate2,
            end_time: this.endDate2
          }
        })
        .then(res => {
          this.FabulousEchart.yData1 = res.data.data.datas1;
          this.FabulousEchart.yData2 = res.data.data.datas2;
          res.data.data.dates.forEach((item, index) => {
            this.FabulousEchart.xData.push(this.timestamp(item, "Y-M-D"));
            return this.FabulousEchart.xData;
          });
        });
    },
    // 获取--直播详情简介信息
    GetLiveIntroduction() {
      console.log(this.$route.params.id);
      this.$axios
        .get("/api/live/GetLiveIntroduction", {
          params: {
            roomId: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.Introduction = res.data.data;
          }
        });
    },
    // 获取--直播达人详情
    GetAuthorDetailInfo() {
      this.$axios
        .get("/api/author/GetAuthorDetailInfo", {
          params: {
            //
            // AuthorId:id,  //达人id
            AuthorId: "96987607056"
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.DetailInfo = res.data.data;
            this.dataOverView = res.data.data.dataOverView;
          }
        });
    },
    // 获取--人气数据+带货数据
    GetLiveInfoData() {
      this.$axios
        .get("/api/live/GetLiveInfoData", {
          params: {
            // roomId:id,  //直播间id
            roomId: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.InfoData = res.data.data;
          }
        });
    },
    // 商品和小店分类
    getCateList() {
      let that = this;
      that.$axios
        .get(
          "/api/live/cate",
          {
            params: {
              // roomId: that.$route.params.id,
              roomId: this.$route.params.id
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.proKindList = res.data.data.cateList;
            that.shopKindList = res.data.data.shopList;
            that.getProList();
            that.setCondition();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品品牌
    GetBrandByRoomId() {
      let that = this;
      that.$axios
        .get(
          "api/live/GetBrandByRoomId",
          {
            params: {
              roomId: that.$route.params.id
              // roomId: "6960648770119863054"
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            this.brandList = res.data.data;
            that.getProList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品列表
    getProList() {
      let that = this;
      that.loading = true;
      // 商品类目
      let proCateId = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proCateId = item.value;
        }
      });
      let proIds = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proIds = item.proIds;
        }
      });

      // 小店分类
      let shopId = 0;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopId = item.value;
        }
      });
      // shopIds
      let shopIds = null;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopIds = item.shopIds;
        }
      });
      // 商品品牌
      let roomid = 0;
      that.brandList.map((item, index) => {
        if (item.brandName == this.brand) {
          roomid = item.value;
        }
      });
      let roomids = 0;
      that.brandList.map((item, index) => {
        if (item.brandName == this.brand) {
          roomids = item.roomids;
        }
      });
      that.$axios
        .post(
          "/api/live/prosearch1",
          {
            roomId: that.$route.params.id,
            // roomId: "6960648770119863054",
            proIds: proIds,
            proCateId: proCateId,
            shopId: shopId,
            shopIds: shopIds,
            key: this.trimStr(that.keyword),
            page: that.page,
            size: 8,
            brandId: roomid,
            sort: "Volume" //销量=Volume，销量额=Amount
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.page += 1;
            that.proList = that.proList.concat(res.data.data.data);
            this.count = res.data.count;
            this.volume = res.data.data.volume;
            this.amount = res.data.data.amount;
            this.proId = res.data.data.proId;
            res.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);
          } else {
            that.busy = true;
          }
          that.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取--观众画像
    getFansPortrait() {
      this.$axios
        .get("api/live/analysis", {
          params: {
            // authorId: this.$route.params.id,
            // roomId: "6978691343359249166"
            roomId: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.pieGenderData = res.data.data.fansSexList;
            this.fansxData = res.data.data.fansAgeList;
            this.fansDiYu = res.data.data.fansFrom;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /* 折线图 */
    trend() {
      let that = this;
      this.$axios
        .get("api/live/trend", {
          params: {
            // authorId: this.$route.params.id,
            roomId: this.$route.params.id,
            type: this.type.toString(),
            markType: 0
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.saleNumList = res.data.data;
            if (res.data.data.dataUnix != null) {
              // x
              res.data.data.dataUnix.forEach(element => {
                that.xData01.push(that.timestamp(element, "h:m:s"));
                return that.xData01;
              });
              that.y1Data01 = res.data.data.trendData[1];
              that.y2Data01 = res.data.data.trendData[0];
            }
            that.finish01 = true;
            // console.log(this.y1Data01,this.y2Data01);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取直播间列表?????
    GetLiveRoomsByProId(liveDataItem) {
      this.liveBoxData = liveDataItem;
      let that = this;
      this.loading = true;
      this.GetLiveVolPriByPro();
      return;
    },
    /* 弹出框的折线图 */
    GetLiveVolPriByPro() {
      this.$axios
        .get("api/live/GetLiveVolPriByPro", {
          params: {
            roomId: this.$route.params.id,
            proId: this.proId
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            if (this.showJgXl == true) {
              this.vtrend = res.data.data.volumeTrend;
            } else {
              this.vtrend = res.data.data.priceTrend;
            }
            // this.ptrend = res.data.data.priceTrend
            res.data.data.timespans.forEach(element => {
              this.tspans.push(this.timestamp(element, "h:m:s"));
              return this.tspans;
            });
            this.tspans = this.tspans;
          }
        });
    },
    // 热门直播间分页
    changePage(n) {
      this.page01 = n;
      this.proList = [];
      this.getProList();
      this.$nextTick(() => {
        setTimeout(() => {
          // this.roomLoading = false;
        }, 500);
      });
    },
    // 弹窗分页
    changePages(n) {
      // this.page = n
      // this.proList = []
      // this.getProList()     //调取的接口需修改
      this.$nextTick(() => {
        setTimeout(() => {}, 500);
      });
    },
    /* 跳转连接 */
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/live/${id}`
      });
      window.open(router.href, "_blank");
    },
    /* tab按钮点击变色 */
    changeclass(n) {
      for (var i = 0; i < 4; i++) {
        this.acts.splice(i, 1, -1);
      }
      this.acts.splice(n, 1, 1);
    }
  }
};
</script>

<style lang="less" scoped>
.liveDetails {
  display: flex;
  padding: 14px;
  box-sizing: border-box;
  /* 左侧信息栏 */
  .boxleft {
    width: 300px;
    margin-right: 10px;
    // 直播信息
    .bltop {
      padding: 20px 0 0 20px;
      margin-bottom: 10px;
      .title {
        display: flex;
        margin-bottom: 30px;
        position: relative;
        .titlelogo {
          display: block;
          width: 50px;
          height: 50px;
          border-radius: 6px;
          margin-right: 10px;
        }
        .zhibo {
          position: absolute;
          bottom: 0;
          left: 32px;
          width: 18px;
          height: 18px;
          background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2),
            linear-gradient(#fff, #fff);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          border-radius: 6px 0px 4px 0px;
        }
        > p {
          width: 197px;
          font-size: 16px;
          line-height: 24px;
          color: #222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          span {
            display: inline-block;
            width: 19px;
            height: 16px;
            img {
              display: block;
            }
          }
        }
        p:nth-of-type(1) {
          span {
            margin-right: 4px;
          }
        }
      }
      .bltime {
        width: 260px;
        font-size: 12px;
        color: #888888;
        padding-bottom: 20px;
        span {
          display: inline-block;
          width: 120px;
          margin-left: 26px;
          color: #222222;
        }
      }
      .bltime:nth-of-type(3) {
        width: 260px;
        border-bottom: solid 1px #efefef;
      }
      .blbtn {
        // padding: 16px 0 20px 40px;  //一个按钮时
        padding: 20px 0;
        transform: translateX(-10px);
        text-align: center;
        span {
          display: inline-block;
          width: 80px;
          line-height: 30px;
          border-radius: 4px;
          border: solid 1px #1779ff;
          font-size: 14px;
          color: #1779ff;
          text-align: center;
          cursor: pointer;
        }
        span:nth-of-type(2) {
          margin-left: 20px;
        }
      }
    }
    // 直播达人信息
    .blbot {
      padding: 20px 0 0 20px;
      .portrait {
        display: flex;
        margin-bottom: 30px;
        img {
          display: inline-block;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
        }
        p {
          font-size: 16px;
          color: #222222;
          padding: 7px 0 8px 10px;
          width: 196px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          span {
            display: block;
            font-size: 12px;
            color: #888;
          }
        }
      }
      .infor {
        padding-bottom: 20px;
        font-size: 12px;
        color: #888;
      }
      .sex {
        //性别
        img,
        span {
          margin-left: 52px;
        }
      }
      // 口碑
      .mouth {
        display: flex;
        p {
          margin-right: 26px;
        }
        .info_item-right {
          display: flex;
          span:nth-of-type(1) {
            margin-right: 5px;
          }
          img {
            width: 13px;
            height: 13px;
            margin-left: 7px;
            margin-top: 2px;
            cursor: pointer;
          }
        }
      }
      // 总数
      .in-num {
        span {
          display: inline-block;
          margin-left: 26px;
        }
        img {
          width: 13px;
          height: 13px;
          margin-left: 5px;
          margin-top: -3px;
          cursor: pointer;
        }
      }
    }
  }
  /* 右侧数据栏 */
  .boxright {
    flex: 1;
    // tab按钮
    .tabbtn > a {
      display: inline-block;
      width: 129px;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border-radius: 4px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #555;
      text-align: center;
      text-decoration: none;
    }
    dl {
      display: flex;
      font-size: 14px;
      margin-bottom: 10px;
      // margin-top: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      dt {
        padding-top: 6px;
        // width: 78px;
        margin-right: 20px;
        flex-shrink: 0;
        color: #888;
      }
      dd {
        position: relative;
        color: #555;
        height: 32px;
        overflow: hidden;
        .cg_items {
          // position: relative;
          display: inline-block;
          font-size: 0;
          span {
            display: inline-block;
            height: 32px;
            padding: 0 16px;
            // margin-bottom: 5px;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            vertical-align: middle;
            &.active {
              color: #1779ff;
              background-color: #ebf3ff;
              border-radius: 4px;
            }
          }
          i {
            position: absolute;
            display: none;
            right: 0;
            top: 6px;
            font-size: 14px;
            font-style: normal;
            color: #1779ff;
            cursor: pointer;
          }
        }
        &.overstep {
          padding-right: 22px;
          .cg_items {
            i {
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        &.is_unfold {
          padding-right: 0;
          height: inherit;
          .cg_items {
            i {
              position: inherit;
            }
          }
        }
      }
    }
    // 数据（内容）
    .main {
      height: 778px;
      overflow-y: auto;
      padding: 20px 0 0 20px;
    }
    /* 直播数据分析-人气数值 */
    .moodbox {
      padding-top: 33px;
      display: flex;
      flex-wrap: wrap;
      width: 80.5%;
      margin: 0 auto 40px auto;
      p {
        width: 12.4%;
        // padding: 6px 32px 0 32px;
        line-height: 1;
        font-size: 22px;
        color: #222222;
        font-family: DINAlternate-Bold;
        text-align: center;
        span {
          display: block;
          font-size: 12px;
          font-weight: normal;
          color: #888;
          padding-top: 12px;
        }
      }
    }
    /* 数据趋势 */
    .trend {
      .check:nth-of-type(1) {
        margin-top: 30px;
      }
      .check {
        display: flex;
        margin-bottom: 20px;
        span {
          display: block;
          font-size: 14px;
          color: #888;
          margin-right: 30px;
        }
      }
      .zanwu {
        height: 484px;
      }
    }
    /* 搜索框 */
    .searchBox {
      margin-top: 17px;
      margin-bottom: 10px;
      width: 308px;
      height: 40px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eed5d5;
      .el-input {
        line-height: 40px;
      }
      .el-input__inner {
        flex: 1;
        background-color: #fff;
        border: solid 1px #e5e5e5;
        height: 40px;
        line-height: 40px;
        border-radius: 4px 0 0 4px;
      }
      .imgBox {
        height: 40px;
        width: 38px;
        background: #1779ff;
        border-radius: 0px 4px 4px 0px;
        cursor: pointer;
        place-items: center;
        position: relative;
        img {
          width: 15px;
          height: 15px;
          position: absolute;
          top: 30%;
          left: 25%;
        }
      }
    }
    /* 统计表 */
    .census {
      display: flex;
      div {
        width: 354px;
        line-height: 50px;
        background-color: #f5f5f5;
        margin: 0 20px 10px 0;
        padding: 0 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        p {
          color: #888;
        }
        span {
          display: block;
          color: #222;
        }
      }
    }
    /* 商品表格 */
    .last_list {
      margin-bottom: 40px;
    }
    table {
      text-align: center;
      margin-top: 14px;
      margin-bottom: 20px;
      thead {
        img {
          width: 5px;
          height: 10px;
          vertical-align: 0;
          margin-right: 2px;
          cursor: pointer;
        }
        tr {
          th {
            padding: 0 2px;
          }
          th:first-child {
            text-align: left;
            padding-left: 24px;
          }
          th:nth-child(2) th:nth-child(3),
          th:nth-child(4),
          th:nth-child(5),
          th:nth-child(6),
          th:nth-child(7) {
            width: 11%;
          }
          th:nth-child(8) {
            width: 14%;
          }
        }
      }
      tbody {
        tr {
          height: 78px;
          td {
            padding: 0 2px;
          }
          td:nth-child(1),
          td:nth-child(3),
          td:nth-child(4),
          td:nth-child(5),
          td:nth-child(6),
          td:nth-child(7) {
            font-family: DINAlternate-Bold;
            font-size: 15px;
            color: #222222;
          }
          td:last-of-type {
            span {
              display: block;
              width: 88px !important;
              margin: 0 auto;
              line-height: 32px;
              background: #fd7f2c;
              font-size: 14px;
              color: #fff;
              text-align: center;
            }
          }
        }
        .rankNum {
          font-size: 15px;
        }
      }
      // 数量
      .numBox {
        span:nth-of-type(1) {
          font-size: 16px !important;
        }
      }
      // 商品
      .rightBox {
        display: flex;
        align-items: center;
        padding-left: 24px;
        .picture {
          width: 50px;
          height: 50px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            object-fit: cover;
          }
        }
        .info {
          margin-left: 10px;
          text-align: left;
          .info_top {
            font-size: 14px;
            color: #222222;
            font-weight: 600;
            width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            img {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }
          }
          .info_btm {
            font-size: 13px;
            color: #888888;
            margin-top: 4px;
          }
        }
      }
      // 操作
      .optionBox {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 32px;
          height: 32px;
          margin-right: 16px;
          cursor: pointer;
        }
        img:last-child {
          margin-right: 0;
        }
        .optionBox-details {
          width: 88px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          color: #fff;
          margin: 0 auto;
          cursor: pointer;
        }
        .optionBox-details:hover {
          background-color: #ff924b;
        }
      }
    }
  }
  /* 观众画像 */
  .viewerbox {
    display: flex;
    // 观众画像
    .vbleft {
      width: 51.3%;
      .second_hua {
        margin-top: 30px;
        height: 60px;
      }
      .second_echart {
        height: 300px;
      }
    }
    // 观众来源分析
    .vbright {
      width: 48.6%;
    }
  }
  /* 弹出框折线图 */
  .popup_wrap {
    padding: 20px 30px 0;
    .popup_wrap-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #222;
      }
      .switch {
        display: flex;
        .switch-btn {
          width: 50px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          background-color: #fff;
          border: 1px solid #efefef;
          box-sizing: border-box;
          cursor: pointer;
        }
        .switch-btn:first-child {
          border-radius: 6px 0px 0px 6px;
          border-right: none;
        }
        .switch-btn:last-child {
          border-radius: 0px 6px 6px 0px;
        }
        .native {
          background-color: #1779ff;
          color: #fff;
        }
      }

      .time_slot {
        // height: 62px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .tab01 {
          margin-right: 20px;
        }
      }
    }
    .popup_wrap-explain {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 28px;
      span {
        margin-right: 4px;
      }
      .text {
        font-size: 13px;
        color: #555;
        margin-left: 18px;
        .num {
          color: #fd7f2c;
        }
      }
    }
    .popup_wrap-echart {
      width: 100%;
      height: 300px;
    }
    .m-t30 {
      margin-top: 30px;
    }
  }
}
/* 搜索框 */
.el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
}
/* 直播间弹框--直播数据 */
.hotRoomBox {
  padding: 20px 30px 0 30px;
  box-sizing: border-box;
}
/* 直播间弹框--销量趋势图 */
.trends {
  padding: 20px 30px 0 30px;
  box-sizing: border-box;
  position: relative;
}
.hbnumbox {
  //商品直播数据
  > p {
    margin-bottom: 20px;
  }
  .hbnum {
    display: flex;
    border-bottom: 1px solid #efefef;
    img {
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 6px;
      margin-right: 10px;
      margin-bottom: 20px;
      border: 1px solid #e5e5e5;
    }
    p {
      font-size: 14px;
      color: #222;
      padding-top: 4px;
      span {
        display: block;
        color: #888;
      }
    }
  }
  .datas {
    display: flex;
    margin: 30px 0 38px 0;
    div:last-of-type {
      border-right: 0;
    }
    p {
      width: 24.6%;
      font-size: 24px;
      color: #222;
      text-align: center;
      padding-right: 50px;
      padding-left: 50px;
      span {
        display: block;
        font-size: 12px;
        color: #888;
        padding-top: 10px;
      }
    }
  }
}
/* 弹窗中的分页 */
.pageBoxs {
  text-align: center;
  margin: 12px 0 20px 0;
}
/* 圆角 */
.fillet {
  border-radius: 4px;
  background-color: #fff;
}
/* 侧边 */
.slide {
  line-height: 1;
  font-size: 16px;
  color: #222222;
  font-weight: 600;
  border-left: 4px solid #1779ff;
  padding-right: 6px;
}
.slide > span {
  display: inline-block;
  width: 4px;
}
/* 小手 */
.hands {
  cursor: pointer;
}
/* 边框 */
.border {
  width: 1px;
  border-left: 1px solid #efefef;
}
/* 响应式 */
@media screen and (max-width: 1400px) {
  #liveDetails .moodbox {
    display: flex;
    flex-wrap: wrap;
    p {
      width: 16%;
    }
    .mbfan {
      margin-top: 30px;
    }
    .mbfans {
      margin-top: 30px;
    }
    .bor4 {
      border: 0 !important;
    }
  }
}
/*  */
.switch {
  display: flex;
  width: 108px;
  height: 28px;
  position: absolute;
  right: 98px;
  top: 12px;
  .switch-btn {
    width: 50px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    color: #555;
    background-color: #fff;
    border: 1px solid #efefef;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  .switch-btn:first-child {
    border-radius: 6px 0 0 6px;
    border-right: none;
  }
  .switch-btn:last-child {
    border-radius: 0 6px 6px 0;
    border-right: none;
  }
}
.switch .native {
  background-color: #1779ff;
  color: #fff;
}
/* tab 按钮的默认选中状态 */
.showClass {
  background-color: #1779ff !important;
  color: #ffff !important;
}
</style>
